<template>
  <view style="padding-bottom: 100rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-if="tabIndex === 0">
      <u-cell-group>
        <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item title="二级经销商名称" :arrow="false" :value="state.Double_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item title="门店名称" :arrow="false" :value="state.Door_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item title="门店代码" :arrow="false" :value="state.Door_Dealer_BaseInfo.Account"></u-cell-item>
        <u-cell-item title="设计稿小样" :arrow="false" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item :arrow="false" style="padding: 10rpx;">
          <image-upload :value="state.RealList" :readonly="true"></image-upload>
        </u-cell-item>
        <u-cell-item title="远景" :arrow="false">
          <image-upload v-model="form.OldPhotoUrl" :multiple="false"></image-upload>
        </u-cell-item>
        <u-cell-item title="近景" :arrow="false">
          <image-upload v-model="form.PhotoUrl" :multiple="false"></image-upload>
        </u-cell-item>
        <u-cell-item title="夜景" :arrow="false">
          <image-upload v-model="form.PhotoUrl2" :multiple="false"></image-upload>
        </u-cell-item>

        <u-cell-item title="门头宽度" :arrow="false">
          <view class="u-flex">
            <u-input type="number" placeholder="门头宽度" v-model="form.StoreWith" inputAlign="right"></u-input>
            <text class="u-m-l-20">米</text>
          </view>
        </u-cell-item>
        <u-cell-item title="门头高度" :arrow="false">
          <view class="u-flex">
            <u-input type="number" placeholder="门头高度" v-model="form.StoreHeight" inputAlign="right"></u-input>
            <text class="u-m-l-20">米</text>
          </view>
        </u-cell-item>
        <u-cell-item title="发光字高度" :arrow="false">
          <view class="u-flex">
            <u-input type="number" placeholder="发光字高度" v-model="form.LightHeight" inputAlign="right"></u-input>
            <text class="u-m-l-20">米</text>
          </view>
        </u-cell-item>
        <u-cell-item title="完工日期" :arrow="false"><date-picker v-model="form.Created"></date-picker></u-cell-item>
        <u-cell-item title="是否精选门头" :arrow="false">
          <u-radio-group v-model="form.IsGoodDoor">
            <u-radio :name="1">是</u-radio>
            <u-radio :name="2">否</u-radio>
          </u-radio-group>
        </u-cell-item>
        <u-cell-item title="审核状态" :arrow="false" :value="state.DoorApplyInfo.StateName"></u-cell-item>
        <review-flow :data="state.AuditForList"></review-flow>
      </u-cell-group>
    </view>

    <view class="" v-show="tabIndex === 1"><apply-form ref="applyForm"></apply-form></view>

    <view class="btn-group-fixed">
      <u-button :disabled="btnDisabled" type="warning" @tap="submit">保存提交</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisabled: false,
      title: '门头费用申请',
      tabList: [{ name: '基本信息' }, { name: '申请备注' }],
      tabIndex: 0,

      state: {
        DoorApplyInfo: {},
        Door_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        First_Dealer_BaseInfo: {},
        RealList: [],
        ShowLevel: null,
        This_Dealer_OtherInfo: {},
        This_Dealer_RelationList: []
      },

      form: {
        DealerId: '',
        Created: null,
        OldPhotoUrl: '',
        PhotoUrl: '',
        PhotoUrl2: '',
        StoreWith: null,
        StoreHeight: null,
        LightHeight: null,
        ApplyFile: '',
        // 申请时间
        STime: null,
        // 申请备注
        totalRemark_textarea: '',
        // 是否精选门头
        IsGoodDoor: 0
      }
    };
  },

  onLoad(options) {
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }
    this.init();
    this.$setTitle(this.title);
  },

  methods: {
    submit() {
      let me = this;
      me.btnDisabled = true;
      const applyForm = this.$refs.applyForm;
      this.form.STime = applyForm.form.ApplyTime;
      this.form.totalRemark_textarea = applyForm.form.Remark;

      this.$u.api.saveDoorMoneyApply(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          me.btnDisabled = false;
        }
      });
    },

    init() {
      this.$u.api
        .getInitDoorMoneyApply({
          DealerId: this.form.DealerId,
          SelectType: 1
        })
        .then(res => {
          console.log(res);
          const { ResultCode, ResultMessage, ResultData } = res;

          if (ResultCode === 1) {
            this.state = ResultData;
            this.form = { ...this.state.DoorApplyInfo, ...this.form };
          }
        });
    }
  }
};
</script>

<style lang="scss"></style>
